• Cascading Spin List
• Creating a Spin List using Data Series
• Creating a Spin List using Static Data
• Dynamically repopulating a Spin List
• Getting the Displayed Value for a Spin List

 

Dynamically Repopulating a Spin List Control

Description

If the Spin List control is based on static data, it can be dynamically repopulated at run-time using JavaScript

Discussion

A Spin List control can be dynamically repopulated at run-time using JavaScript. This is done by defining a Spin List control that is populated with static values and using the Spin List object's populate() method.

The populate() method can be used to repopulate the choices in a Spin List control on the client at run-time. Each choice in the Spin List must define both a value and html to display as an array of objects. For example, the code below populates a Spin List control with the ID "NUMBERS" with three values:

var choices = [
    {value:1, html:"One"},
    {value:2, html:"Two"},
    {value:3, html:"Three"}
];

var spinListObj = {dialog.object}.getControl("NUMBERS");
if (spinListObj) {
    spinListObj.populate(choices);
}

When the Spin List control is populated, it will display "One", "Two", and "Three" as the list of choices. The value of the Spin List returned by the {dialog.object}.getValue() method will be a number, 1, 2, or 3. For example:

In this next example, we create a function called populateMinutes that dynamically populates a Spin List control, "SpinList1", with minutes based on an interval (such as 5 or 30.) This let's you repopulate the Spin List control with minutes in intervals of 5 (:00, :05, :10, :15, etc) or 30 (:00, :30).

var populateMinutes = function (interval) {
    var minutes = [":00",":01",":02",":03",":04",":05",
                ":06",":07",":08",":09",":10",":11",
                ":12",":13",":14",":15",":16",":17",
                ":18",":19",":20",":21",":22",":23",
                ":24",":25",":26",":27",":28",":29",
                ":30",":31",":32",":33",":34",":35",
                ":36",":37",":38",":39",":40",":41",
                ":42",":43",":44",":45",":46",":47",
                ":48",":49",":50",":51",":52",":53",
                ":54",":55",":56",":57",":58",":59"];
                
    var _d = [];
    
    var increment = parseInt(interval,10);
    for (var i = 0; i < minutes.length; i=i+increment) {
        // If the value and html are identical, an array of
        // strings can be passed to populate() instead of
        // an array of objects specifying value and html
        _d.push(minutes[i]);
    }
    
    var spinListObj = {dialog.object}.getControl('spinList1');
    if (spinListObj) {
        spinListObj.populate(_d);
    }
}

The function can be called from a client-side event, such as in the Show editor Editor event or Button control's click event, to dynamically repopulate the options in the Spin List. For example, the code below will populate the Spin List control with choices in 5-minute intervals:

populateMinutes(5);

To download an example component that demonstrates the JavaScript shown above, click here.